<template>
  <div class="home-box">
    <div class="w-full tools-box">
      <div class="tools-logo w-150px h-150px rounded-[50%] bg-[var(--color-fill-1)] flex justify-center items-center">
        <img src="@/assets/svg/tools.svg" :alt="alt">
      </div>
      <div class="tools-title">
        <h3>ExeHubTools</h3>
      </div>
      <div class="tools-badge flex justify-center items-center">
        <img src="@/assets/svg/license.svg">
        <!-- <img src="@/assets/svg/hundsun.svg"> -->
        <a-tooltip content="点击查看版本描述">
          <img class="update-list" @click="openRouter('UpdatePage')" src="@/assets/svg/version.svg">
        </a-tooltip>
      </div>
      <div class="tools-update">
        <a-space>
          <a-link href="link">
            <template #icon>
              <icon-cloud-download />
            </template>
            软件更新地址
          </a-link>
          <a-link href="link">
            <template #icon>
              <icon-lock />
            </template>
            获取密码
          </a-link>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script>
import { IconCloudDownload,IconLock } from '@arco-design/web-vue/es/icon';
export default {
  components: { IconCloudDownload,IconLock },
  name: "HomePage",
  title: "主页",
  data() {
    return {
      alt: "ExeHubTools-logo"
    };
  },
  methods: {
    openRouter(path) {
      this.$router.push({ name: path });
    }
  }
};
</script>

<style scoped>
img {
  width: 50%;
}

.tools-des {
  text-align: left;
}

.tools-badge img {
  width: 100px;
  height: 20px;
}

.home-box {
  margin: 20px auto;
  text-align: center;
}

.tools-box,
.tools-logo {
  text-align: center;
  margin: 0 auto;
}

.tools-title {
  /* margin: 20px auto; */
  text-align: center;
}

.update-list {
  cursor: pointer;
}

.tools-desc {
  margin-top: 10px;
}
</style>
